﻿<#include "/template/template.ftl"/>
<@template _title="用户信息">

<div class="row">
    <div id="userInfo" class="panel panel-info">
        <div class="panel-heading">
            <#if user??>
            <h2>${(user.name)!} : ${(user.username)!}</h2>
            </#if>
            <form class="form-inline" role="search" @submit.prevent="queryUserInfo">
                <div class="form-group">
                    <label>用户名:</label>
                    <input type="text" class="form-control" placeholder="学号" v-model="username">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
        </div>
        <div class="alert alert-danger" style="display: none" onclick="$(this).hide();">
            <a class="close" href="#" aria-hidden="true">&times;</a>
            <strong>{{ msg }}</strong>
        </div>
        <div class="panel-body">
            <button type="button" class="btn btn-info" @click.once="showUserInfo(${(user.username)!})"
                    v-show="!showInfo">详细信息
            </button>
            <table class="table table-striped table-bordered table-hover" v-show="showInfo">
                <tr v-for="(value, key) in userInfoData">
                    <td>{{ key }}</td>
                    <td>{{ value }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<#assign _pagejs>
<script src="${base!}/assets/js/userInfo.js"></script>

<!--<script src="https://unpkg.com/vue-resource/dist/vue-resource.min.js"></script>-->
<script src="//cdn.bootcss.com/vue-resource/1.3.3/vue-resource.min.js"></script>
</#assign>
</@template>